<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>
<body>

<div id="app">
    <h2>系统欢迎页</h2>
    <router-link to="/first">首页</router-link>
    <router-link to="/user">用户</router-link>

    <hr>
    <router-view></router-view>
</div>
<script>
    let first = {
        template: `
      <div>
      <h4>这是index页面</h4>
      <h3>这是欢迎访问信息管理系统</h3>
</div>
      `,
    };
    let user = {
        template: `
          <div>
          <h3>用户列表页</h3>
          <table border="1px">
            <tr>
              <td> id</td>
              <td>姓名</td>
              <td>生日</td>
              <td>操作</td>
            </tr>
            <tr v-for="user in users" :key="user.id">
              <td>{{ user.id }}</td>
              <td>{{ user.username }}</td>
              <td>{{ user.bir }}</td>
              <td>删除 | 更新</td>
            </tr>
          </table>
          </div>
        `,
        data() {
            return {
                users: [
                    {"id": 1, username: "妖姬", bir: "2010-01-01"},
                    {"id": 2, username: "压缩", bir: "2010-01-02"},
                    {"id": 3, username: "塞拉斯", bir: "2010-01-03"},
                ]
            }
        },

    }
    let myRouter = new VueRouter({
        routes: [
            {path: "/first", component: first},
            {path: "/user", component: user},
            {path: "/", redirect: "/first"}, // 默认路由匹配
            {path: "/*", redirect: "/first"}, // 可以设置没有当前路径时候, 重新定向页面
        ]
    })
    new Vue({
        el: "#app",
        data: {},
        //通过router配置参数注入,从而整个vue实例拥有路由功能
        router: myRouter,
    })
</script>
</body>
</html>